<template>
  <div class="home">
    <div>
      <!-- 标题功能栏 -->
      <el-row class="page-heder" :gutter="20">
        <el-col :span="4">
          <span class="header-name hidden-xs-only">作业上传</span>
        </el-col>
        <el-col :span="16">
          <el-select v-model="value" clearable placeholder="请选择" class="header-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :before-upload="beforeUpload"
            :before-remove="beforeRemove"
            :file-list="fileList"
          >
            <!-- :auto-upload="false" -->
            <el-button size icon="el-icon-upload" type="primary">上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-col>
      </el-row>
      <!-- 文件列表 -->
      <div>
        <HomeworkList></HomeworkList>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeworkList from "@/components/HomeworkList.vue";
import "element-ui/lib/theme-chalk/display.css";
import JSZip from "jszip";
import axios from "axios";

export default {
  name: "HomeworkUnload",
  components: {
    HomeworkList
  },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "作业1"
        },
        {
          value: "2",
          label: "作业2"
        },
        {
          value: "3",
          label: "作业3"
        },
        {
          value: "4",
          label: "作业4"
        },
        {
          value: "5",
          label: "作业5"
        }
      ],
      value: "",
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url:
        //     "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        // },
        // {
        //   name: "food2.jpeg",
        //   url:
        //     "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        // }
      ],
      storObj: {
        flag: "EMPTY",
        loginTime: "",
        stuData: {
          stuID: "",
          stuPwd: "",
          currentIP: ""
        }
      }
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    IsCompressedFile(file) {
      //获取最后一个.的位置
      var index = file.name.lastIndexOf(".");
      //获取后缀
      var ext = file.name.substr(index + 1);
      return ["rar", "zip"].indexOf(ext.toLowerCase()) !== -1;
    },
    tozip(stuID, stuName, fileIndex, file, fileList) {
      var file = document.getElementsByTagName("input");
      var f = document.querySelector("input")[1];
      console.log(file);
      console.log(f);
      var reader = new FileReader();
      console.log(reader);

      // reader.readAsDataURL(document.querySelector("input").files);
      // console.log(reader);
      // const fileObj = file.files[1];
      const windowURL = window.URL || window.webkitURL;

      console.log("tozip");
      console.log(file);
      // console.log(fileObj);
      console.log(fileList);
      var zip = new JSZip();
      var blob = new Blob(file, { type: "text/plain;charset=utf-8" });
      //添加需要压缩的文件 file对象
      zip.file(file.name, blob);
      //zip.file("mimetype", "application/zip");
      //return promise对象   该方法是异步方法 需要注意！上传和修改文件内容需要在此方法中
      zip
        .generateAsync({ type: "Blob", compression: "DEFLATE" })
        .then(function(content) {
          //创建file对象
          var fils = new File(
            [content],
            stuID + "_" + stuName + "_作业" + fileIndex + ".zip",
            { type: "zip" }
          );
          return fils;
        });
    },
    beforeUpload(file) {
      if (this.IsCompressedFile(file) != true) {
        var stuID = this.storObj.stuID;
        var stuName = this.storObj.stuName;
        var fileIndex = 1;
        this.tozip(stuID, stuName, fileIndex, file, this.fileList);
        this.$refs.upload.submit();
      }
    },
    beforeRemove(file, fileList) {
      console.log(file, fileList);
    }
  }
};
</script>

<style scoped>
.page-heder {
  padding: 30px;
}
.page-heder span {
  display: inline-block;
  padding: 5px;
  margin: auto;
  text-align: center;
  font-size: 18px large;
  line-height: 1.5;
}
.header-select {
  float: right;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  height: 40px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>